<template>
	<div>
		<vhead></vhead>
		<scroll></scroll>
		<div class="container" style="margin-top: 20px;">
			<div class="row">
				<div>
					<div class="col-sm-9 col-xs-12">
						<h3 class="col-sm-12 col-xs-12"><span class="panel_title">1F</span>电影推荐</h3> 
						<div>
							<div class="col-sm-12 col-xs-12">
								<div class="index-book col-sm-12 col-xs-12">
									<ul class="list-unstyled">
										<li class="list-hover" @click="findFilm('all',$event)">全部电影</li>
				   						<li @click="findFilm('3',$event)">剧情</li>
				   						<li @click="findFilm('23',$event)">动画</li>
			   							<li><router-link to="/film">······</router-link></li>
									</ul>
								</div> 
								<contentList :dataJson="filmJson"></contentList>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-3 hidden-xs">
					<h3 class="col-sm-12">影评</h3>
					<commentList :dataJson="filmCommentJson"></commentList>
					<labelList :dataJson="filmType"></labelList>
				</div>
			</div>
		</div>
		
		
		<div class="container" style="margin-top: 20px;">
			<div class="row">
				<div class="col-sm-9 col-xs-12">
					<h3 class="col-sm-12 col-xs-12"><span class="panel_title">2F</span>文学鉴赏</h3> 
					<div>
						<div class="col-sm-12 col-xs-12">
							<div class="index-book col-sm-12 col-xs-12">
								<ul class="list-unstyled">
									<li class="list-hover" @click="findBook('all',$event)">全部书籍</li>
			   						<li @click="findBook('13',$event)">HTML</li>
			   						<li @click="findBook('5',$event)">JAVA</li>
			   						<li><router-link to="/book">······</router-link></li>
								</ul>
							</div> 
							<contentList :dataJson="bookJson"></contentList>
						</div>
					</div>
				</div>
				<div class="col-sm-3 hidden-xs">
					<h3 class="col-sm-12">书评</h3>
					<commentList :dataJson="bookCommentJson"></commentList>
					<labelList :dataJson="bookType"></labelList>
				</div>
			</div>
		</div>
		
		<div class="container" style="margin-top: 20px;">
			<div class="row">
				<div class="col-sm-9 col-xs-12" style="display: table;">
					<h3 class="col-sm-12 col-xs-12"><span class="panel_title">3F</span>站长作品</h3> 
					<div>
						<div class="col-sm-12">
							<div class="index-book col-sm-12 col-xs-12">
								<ul class="list-unstyled">
									<li class="list-hover" @click="findResouse('all',$event)">全部作品</li>
			   						<li @click="findResouse('5',$event)">静态页面</li>
			   						<li @click="findResouse('6',$event)">动态页面</li>
			   						<li><router-link to="/resouse">······</router-link></li>
								</ul>
							</div> 
							<contentList :dataJson="reosouseJson"></contentList>
						</div>
					</div>
				</div>
				<div class="col-sm-3 hidden-xs">
					<h3 class="col-sm-12">公告</h3>
					<labelList :dataJson="resouseType"></labelList>
				</div>
			</div>
		</div>
		
		<div style="background: #e7e7e7;margin-top: 20px;">
			<div class="container">
				<div class="row">
					<div class="col-sm-12 col-xs-12">
						<h3 class="col-sm-12"><span class="panel_title">4F</span>生活琐事</h3> 
						<homeLife :lifesJson="lifeJson"></homeLife>
					</div>
				</div>
			</div>
		</div>
		
		<vfoot></vfoot>
	</div>
</template>

<script>
	
	import Vhead from "../public/VHead"
	import LabelList from "../public/LabelList"
	import CommentList from "../public/CommentList"
	import VFoot from "../public/VFoot"
	import Scroll from "./Scroll"
	import ContentList from "./ContentList"
	import HomeLife from "./HomeLife"
	import $ from "jquery"
	import Qs from 'qs'
	

	export default {
		data () {
		    return {
		    	lifeJson : [],
		    	filmJson : [],
		    	bookJson : [],
		    	reosouseJson : [],
		    	filmCommentJson : [],
		    	bookCommentJson : [],
		    	filmType : [],
		    	bookType : [],
		    	resouseType : [],
		    }
	  	},
	 	mounted ($route) {
	 		this.$nextTick(()=>{
	 			let _this = this; 
	 			
	 			//获取所有电影的类型
	 			_this.$axios({
                    method: "post",
                    url: "http://www.qixiaocheng.cn/public/index.php/index/Filmtype/findAllFilmType",
                })
                .then(function(res) {
                	for(var i = 0;i<res.data.length;i++){
  						res.data[i]["id"] = res.data[i]["fId"];
  						res.data[i]["name"] = res.data[i]["name"];
  						res.data[i]["url"] = "film";
  					}
                	_this.filmType = res.data;
               	})
                .catch(function(err) {
                   console.log(err);
               	});
               	
               	//获取所有书本的类型
	 			_this.$axios({
                    method: "post",
                    url: "http://www.qixiaocheng.cn/public/index.php/index/Booktype/findAllBookType",
                })
                .then(function(res) {
                	for(var i = 0;i<res.data.length;i++){
  						res.data[i]["id"] = res.data[i]["type_id"];
  						res.data[i]["name"] = res.data[i]["type_name"];
  						res.data[i]["url"] = "book";
  					}
                	_this.bookType = res.data;
               	})
                .catch(function(err) {
                   console.log(err);
               	});
               	
               	//获取所有作品的类型
	 			_this.$axios({
                    method: "post",
                    url: "http://www.qixiaocheng.cn/public/index.php/index/Resousetype/findAllResousetype",
                })
                .then(function(res) {
                	for(var i = 0;i<res.data.length;i++){
  						res.data[i]["id"] = res.data[i]["r_id"];
  						res.data[i]["name"] = res.data[i]["name"];
  						res.data[i]["url"] = "resouse";
  					}
                	_this.resouseType = res.data;
               	})
                .catch(function(err) {
                   console.log(err);
               	});
	 			
	 			//这是定义需要获取的评论条数
	 			let commentData ={
	 				"number" : "5"
	 			}
	 			
	 			//获取电影的评论
	 			_this.$axios({
                    method: "post",
                    data: Qs.stringify(commentData),
                    url: "http://www.qixiaocheng.cn/public/index.php/index/Filmcomment/findSomeFcomment",
                })
                .then(function(res) {
                	for(var i = 0;i<res.data.length;i++){
  						res.data[i]["id"] = res.data[i]["filmId"];
  						res.data[i]["content"] = res.data[i]["commentContent"];
  						res.data[i]["name"] = res.data[i]["commentName"];
  						res.data[i]["url"] = "filmDeatail";
  					}
                	_this.filmCommentJson = res.data;
               	})
                .catch(function(err) {
                   console.log(err);
               	});
               	
               	//获取书本的评论
	 			_this.$axios({
                    method: "post",
                    data: Qs.stringify(commentData),
                    url: "http://www.qixiaocheng.cn/public/index.php/index/Bookcomment/findSomeBcomment",
                })
                .then(function(res) {
                	for(var i = 0;i<res.data.length;i++){
  						res.data[i]["id"] = res.data[i]["bookId"];
  						res.data[i]["content"] = res.data[i]["commentContent"];
  						res.data[i]["name"] = res.data[i]["commentName"];
  						res.data[i]["url"] = "bookDetail";
  					}
                	_this.bookCommentJson = res.data;
               	})
                .catch(function(err) {
                   console.log(err);
               	});
	 			
	 			//这是定义需要获取的电影书籍和作品的条数
	 			let filmData ={
	 				"number" : "8"
	 			}
	 			
	 			//获取电影数
	 			_this.$axios({
                    method: "post",
                    data: Qs.stringify(filmData),
                    url: "http://www.qixiaocheng.cn/public/index.php/index/Filmdetail/findFilm",
                })
                .then(function(res) {
                	for(var i = 0;i<res.data.length;i++){
  						res.data[i]["imgUrl"] = 'public/uploads/'+res.data[i]["filmImgUrl"] ;
  						res.data[i]["id"] = res.data[i]["filmId"];
  						res.data[i]["name"] = res.data[i]["filmName"];
  						res.data[i]["url"] = '/filmDetail/'+res.data[i]["filmId"];
  					}
                	_this.filmJson = res.data;
                	
               	})
                .catch(function(err) {
                   console.log(err);
               	});
               
               	//获取书本的数量
               	_this.$axios({
                    method: "post",
                    data: Qs.stringify(filmData),
                    url: "http://www.qixiaocheng.cn/public/index.php/index/Book/findAllBook",
                })
                .then(function(res) {
                	for(var i = 0;i<res.data.length;i++){
  						res.data[i]["imgUrl"] = 'public/uploads/'+res.data[i]["bookUrl"] ;
  						res.data[i]["id"] = res.data[i]["bookId"];
  						res.data[i]["name"] = res.data[i]["bookName"];
  						res.data[i]["url"] = '/bookDetail/'+res.data[i]["bookId"];
  					}
                	_this.bookJson = res.data;
               	})
                .catch(function(err) {
                   console.log(err);
               	});
               	
               	//获取作品的数量
               	_this.$axios({
                    method: "post",
                    data: Qs.stringify(filmData),
                    url: "http://www.qixiaocheng.cn/public/index.php/index/Resouse/findSomeResouse",
                })
                .then(function(res) {
                	for(var i = 0;i<res.data.length;i++){
  						res.data[i]["imgUrl"] = 'public/uploads/'+res.data[i]["resouseUrl"] ;
  						res.data[i]["id"] = res.data[i]["resouseId"];
  						res.data[i]["name"] = res.data[i]["resouseName"];
  						res.data[i]["url"] = '/resouseDetail/'+res.data[i]["resouseId"];
  					}
                	_this.reosouseJson = res.data;
               	})
                .catch(function(err) {
                   console.log(err);
               	});
	 			
	 			
	 			//这是获取6条生活记录
 				let lifeData = {
				    "number": "6"
				}
	 			_this.$axios({
                    method: "post",
                    data: Qs.stringify(lifeData),
                    url: "http://www.qixiaocheng.cn/public/index.php/index/Life/findSomeLife",
                })
                .then(function(res) {
                	for(var i = 0;i<res.data.length;i++){
  						res.data[i]["lifeUrl"] = 'public/uploads/'+res.data[i]["lifeUrl"] ;
  						res.data[i]["url"] = '/lifeDetail/'+res.data[i]["lifeId"];
  					}
                	_this.lifeJson = res.data;
               	})
                .catch(function(err) {
                   console.log(err);
               	});
               
	 		})
	 	},
		components : {
			"vhead" : Vhead,
			"scroll" : Scroll,
			"labelList" : LabelList,
			"commentList" : CommentList,
			"contentList" : ContentList,
			"vfoot" : VFoot,
			"homeLife" : HomeLife
		},
		methods : {
			findFilm : function(str,e){  //查找指定的类型
        		let _this = this;
				_this.filmJson =[];
        		let filmChooseType = {
  					"fId":str,
  					"countryId":"all"
  				}
        		_this.$axios({
	  				method:"post",
	  				data:Qs.stringify(filmChooseType),
	  				url:"http://www.qixiaocheng.cn/public/index.php/index/Filmdetail/findFilmBySome",
	  			}).then(function(result){
	  				if(result.data.length>8){
  						for(var i = 0;i<8;i++){
	  						result.data[i]["imgUrl"] = 'public/uploads/'+result.data[i]["filmImgUrl"] ;
	  						result.data[i]["id"] = result.data[i]["filmId"];
	  						result.data[i]["name"] = result.data[i]["filmName"];
	  						result.data[i]["url"] = '/filmDetail/'+result.data[i]["filmId"];
	  						_this.filmJson.push(result.data[i])
	  					}
  					}
  					else{
  						for(var i = 0;i<result.data.length;i++){
	  						result.data[i]["imgUrl"] = 'public/uploads/'+result.data[i]["filmImgUrl"] ;
	  						result.data[i]["id"] = result.data[i]["filmId"];
	  						result.data[i]["name"] = result.data[i]["filmName"];
	  						result.data[i]["url"] = '/filmDetail/'+result.data[i]["filmId"];
	  						_this.filmJson.push(result.data[i])
	  					}
  					}
	  			});
	  			$(e.target).siblings().removeClass('list-hover');
	  			$(e.target).addClass('list-hover');
        	},
        	findBook : function(str,e){
        		let _this = this;
				_this.bookJson =[];
        		let bookChooseType = {
  					"typeId":str,
  				}
        		_this.$axios({
	  				method:"post",
	  				data:Qs.stringify(bookChooseType),
	  				url:"http://www.qixiaocheng.cn/public/index.php/index/Book/findBookBySome",
	  			}).then(function(result){
	  				if(result.data.length>8){
  						for(var i = 0;i<8;i++){
	  						result.data[i]["imgUrl"] = 'public/uploads/'+result.data[i]["bookUrl"] ;
	  						result.data[i]["id"] = result.data[i]["bookId"];
	  						result.data[i]["name"] = result.data[i]["bookName"];
	  						result.data[i]["url"] = '/bookDetail/'+result.data[i]["bookId"];
	  						_this.bookJson.push(result.data[i])
	  					}
  					}
  					else{
  						for(var i = 0;i<result.data.length;i++){
	  						result.data[i]["imgUrl"] = 'public/uploads/'+result.data[i]["bookUrl"] ;
	  						result.data[i]["id"] = result.data[i]["bookId"];
	  						result.data[i]["name"] = result.data[i]["bookName"];
	  						result.data[i]["url"] = '/bookDetail/'+result.data[i]["bookId"];
	  						_this.bookJson.push(result.data[i])
	  					}
  					}
	  			});
	  			$(e.target).siblings().removeClass('list-hover');
	  			$(e.target).addClass('list-hover');
        	},
        	findResouse : function(str,e){
        		let _this = this;
				_this.reosouseJson =[];
        		let resouseChooseType = {
  					"typeId":str,
  				}
        		_this.$axios({
	  				method:"post",
	  				data:Qs.stringify(resouseChooseType),
	  				url:"http://www.qixiaocheng.cn/public/index.php/index/Resouse/findResouseBySome",
	  			}).then(function(result){
	  				if(result.data.length>8){
  						for(var i = 0;i<8;i++){
	  						result.data[i]["imgUrl"] = 'public/uploads/'+result.data[i]["resouseUrl"] ;
	  						result.data[i]["id"] = result.data[i]["id"];
	  						result.data[i]["name"] = result.data[i]["resouseName"];
	  						result.data[i]["url"] = '/resouseDetail/'+result.data[i]["resouseId"];
	  						_this.reosouseJson.push(result.data[i])
	  					}
  					}
  					else{
  						for(var i = 0;i<result.data.length;i++){
	  						result.data[i]["imgUrl"] = 'public/uploads/'+result.data[i]["resouseUrl"] ;
	  						result.data[i]["id"] = result.data[i]["id"];
	  						result.data[i]["name"] = result.data[i]["resouseName"];
	  						result.data[i]["url"] = '/resouseDetail/'+result.data[i]["resouseId"];
	  						_this.reosouseJson.push(result.data[i])
	  					}
  					}
	  			});
	  			$(e.target).siblings().removeClass('list-hover');
	  			$(e.target).addClass('list-hover');
        	},
		}
		
	}
</script>

<style>
.panel_title{
	 background: url(../../assets/11.png) no-repeat;
    font-size: 15px;
    color: #fff;
    height: 50px;
    display: block;
    float: left;
    height: 30px;
    line-height: 30px;
    width: 35px;
}
.index-book{
    background: #f5f5f5;
	display: table;
}
.index-book ul li{
    float: left;
    width: 25%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #9f9f9f;
    cursor: pointer;
}
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12{
	margin: 0px !important; 
	padding: 7px !important;
}
</style>